<template>
  <el-dialog draggable v-model="RegistVisible" title="注册账号">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="80px"
        style="padding-right: 80px;"
    >
      <el-form-item label="电话" prop="acc">
        <el-input v-model="ruleForm.acc" placeholder="请输入电话" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input v-model="ruleForm.pwd" placeholder="请输入密码" type="password" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入姓名" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="请选择性别">
          <el-option size="large" label="男" value="男"/>
          <el-option size="large" label="女" value="女"/>
        </el-select>
      </el-form-item>
      <el-form-item label="生日" prop="birth">
        <el-date-picker
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            v-model="ruleForm.birth"
            type="date"
            placeholder="请输入生日"
            :default-value="new Date(2000, 9, 1)"
        />
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-row style="width: 100%;">
          <el-col :span="18">
            <el-input v-model="ruleForm.code" placeholder="请输入验证码"/>
          </el-col>
          <el-col :span="6">
            <div class="code">
              <img @click="getCode" style="height: 30px;margin-top: 2px;cursor: pointer;" :src="codeSrc" alt="code">
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button size="large" type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="large" @click="resetForm(ruleFormRef)">清空</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import {defineModel, onMounted, reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import api from "@/api";
import {ElMessage} from "element-plus";

const ruleFormRef = ref<FormInstance>()
const RegistVisible = defineModel('visible');
onMounted((() => {
  getCode();
}))
const codeSrc = ref('');

function getCode() {
  api.login.generateImageCode().then((res: any) => {
    const bufferUrl = btoa(
        new Uint8Array(res).reduce(
            (data, byte) => data + String.fromCharCode(byte),
            ""
        )
    );
    codeSrc.value = "data:imname/png;base64," + bufferUrl;
  });
}

const checkAcc = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入电话'))
  }
  callback()
}

const checkPwd = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  }
  if (value.length < 6) {
    callback(new Error('密码必须大于6位'))
  } else {
    callback()
  }
}
const checkName = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入姓名'))
  }
  callback()
}

const checkSex = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入性别'))
  }
  callback()
}

const checkBirth = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入生日'))
  }
  callback()
}

const checkCode = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入验证码'))
  }
  callback()
}

const ruleForm = reactive({
  acc: '',
  pwd: '',
  name: '',
  sex: '',
  birth: '',
  code: '',
})

const rules = reactive<FormRules>({
  acc: [{validator: checkAcc, trigger: 'blur', required: true}],
  pwd: [{validator: checkPwd, trigger: 'blur', required: true}],
  name: [{validator: checkName, trigger: 'blur', required: true}],
  sex: [{validator: checkSex, trigger: 'blur', required: true}],
  birth: [{validator: checkBirth, trigger: 'blur', required: true}],
  code: [{validator: checkCode, trigger: 'blur', required: true}],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  //@ts-ignore
  formEl.validate((valid) => {
    if (valid) {
      api.login.register(ruleForm.acc, ruleForm.pwd, ruleForm.name, ruleForm.sex, ruleForm.birth, ruleForm.code).then((res: any) => {
        ElMessage({message: res.message, type: res.success ? 'success' : 'error', grouping: true, showClose: true});
        if (res.success) {
          RegistVisible.value = false;
          ruleForm.acc = '';
          ruleForm.pwd = '';
          ruleForm.name = '';
          ruleForm.birth = '';
          ruleForm.code = '';
        }
      })
    } else {
      ElMessage({message: '请完善表单！', type: 'error', grouping: true, showClose: true});
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped>
:deep(.el-button) {
  width: 100%;
}
</style>